Skip to content

feat(vite-plugin-angular): introduce support for Angular v19 HMR/live reload #1523

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 4 commits into from
Dec 27, 2024
Merged

feat(vite-plugin-angular): introduce support for Angular v19 HMR/live reload #1523

merged 4 commits into from
Dec 27, 2024

Conversation

brandonroberts
Copy link
Member

@brandonroberts brandonroberts commented Dec 27, 2024 •
edited
Loading

PR Checklist

Closes #1524

What is the new behavior?

When using the liveReload option in the analog plugin with Angular v19, the new HMR code generated by the compiler is handled by the vite plugin, enabling HMR updates without full page reloads.

  • Inline styles and templates are supported
  • External styles and templates are supported
  • Page reloads occur when classes are changed (logic copied from Angular compilation)
/// <reference types="vitest" />

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  // ..other config
  plugins: [analog({ liveReload: true })],
}));

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Links
https://vite.dev/guide/api-plugin.html#handlehotupdate
https://bjornlu.com/blog/hot-module-replacement-is-easy#importmetahotaccept

[optional] What gif best describes this PR or how it makes you feel?

@netlify Netlify
Copy link

netlify bot commented Dec 27, 2024 •
edited
Loading

✅ Deploy Preview for analog-docs ready!

Name Link
🔨 Latest commit e6be185
🔍 Latest deploy log https://app.netlify.com/sites/analog-docs/deploys/676ecf8178251f0008672033
😎 Deploy Preview https://deploy-preview-1523--analog-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify Netlify
Copy link

netlify bot commented Dec 27, 2024 •
edited
Loading

✅ Deploy Preview for analog-app ready!

Name Link
🔨 Latest commit e6be185
🔍 Latest deploy log https://app.netlify.com/sites/analog-app/deploys/676ecf812be41c00089d7797
😎 Deploy Preview https://deploy-preview-1523--analog-app.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify Netlify
Copy link

netlify bot commented Dec 27, 2024 •
edited
Loading

✅ Deploy Preview for analog-blog ready!

Name Link
🔨 Latest commit e6be185
🔍 Latest deploy log https://app.netlify.com/sites/analog-blog/deploys/676ecf81aa0cb90008c4f097
😎 Deploy Preview https://deploy-preview-1523--analog-blog.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify Netlify
Copy link

netlify bot commented Dec 27, 2024 •
edited
Loading

✅ Deploy Preview for analog-ng-app ready!

Name Link
🔨 Latest commit e6be185
🔍 Latest deploy log https://app.netlify.com/sites/analog-ng-app/deploys/676ecf819e55540008820c16
😎 Deploy Preview https://deploy-preview-1523--analog-ng-app.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@brandonroberts brandonroberts merged commit 0602a8f into beta Dec 27, 2024
24 checks passed
@brandonroberts brandonroberts deleted the feat-ng-hmr branch December 27, 2024 17:06
@sawa-ko
Copy link

sawa-ko commented Dec 31, 2024

Finally someone did what angular has never been able to, HMR without reloading the page completely.

I still don't understand how the community has been asking for it for years but they can't do it...

@brandonroberts
Copy link
Member Author

Finally someone did what angular has never been able to, HMR without reloading the page completely.

I still don't understand how the community has been asking for it for years but they can't do it...

@sawa-ko that's incorrect. It's enabled in Angular v19 already through the Angular CLI and will be the default for new apps in 19.1. We integrated the HMR functionality into Analog.

@sawa-ko
Copy link

sawa-ko commented Jan 1, 2025

Hum, but the angular HMR keeps reloading the entire page when a component changes, right?

And no, I don't mean the CSS HMR.

@brandonroberts
Copy link
Member Author

brandonroberts commented Jan 1, 2025 •
edited
Loading

@sawa-ko By default yes, HMR has to be enabled manually using an environment variable.

NG_HMR_TEMPLATES=1 ng serve

This will be enabled by default for newly created Angular apps in Angular v19.1 which hasn't been released yet. You can also enable it with the liveReload: true option for the project in the angular.json.

PR: angular/angular-cli#29114

@omarbelkhodja-minotore
Copy link
Contributor

Is HMR supposed to be fully operational now with Angular 19.1.x ? I'm testing using HMR enabled in Storybook. Updating the CSS file is triggering the browser update, but, updating the HTML doesn't, although I do see a message 'hmr update' on the command line.

@omarbelkhodja-minotore
Copy link
Contributor

Is HMR supposed to be fully operational now with Angular 19.1.x ? I'm testing using HMR enabled in Storybook. Updating the CSS file is triggering the browser update, but, updating the HTML doesn't, although I do see a message 'hmr update' on the command line.

OK. I see it is fixed with in the following commit:
ee58f28

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Enable HMR/Live Reload behavior with Angular v19

3 participants

@brandonroberts @sawa-ko @omarbelkhodja-minotore